// 清除浮动
@mixin clearfix {
	&::after {
		clear: both;
		display: block;
		content: '';
	}
}

// 单行位置省略号， `$substract`单位为%
@mixin ellipsis($substract: 0) {
	width: 100% - $substract;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// 圆角
@mixin rounded($radius) {
	border-radius: $radius;
}

// 阴影
@mixin shadow($x, $y, $blur, $color) {
	box-shadow: $x $y $blur $color;
}

// 内阴影
@mixin shadow-inset($x, $y, $blur, $color) {
	box-shadow: inset $x $y $blur $color;
}

// 过渡动画
@mixin transition($property) {
	transition: $property 0.2s ease;
}

@mixin box-sizing {
	box-sizing: border-box;
}

// 线性渐变背景色 上下
@mixin linear-gradient-tb($from, $to) {
	/* Fallback for sad browsers */
	background-color: $to;

	/* W3C */
	background-image: linear-gradient($from, $to);
}

// 线性渐变背景色 左右
@mixin linear-gradient-lr($from, $to) {
	/* Fallback for sad browsers */
	background-color: $to;

	/* W3C */
	background-image: linear-gradient(to right, $from, $to);
}

/* Scrollbar
 -------------------------- */
@mixin scroll-bar($width: 8px, $color: rgba(0, 0, 0, 0.3)) {
	::-webkit-scrollbar {
		width: $width;
		height: $width;

		&-thumb {
			background-color: $color;
			border-radius: calc($width / 2);
		}

		&-track {
			background-color: transparent;
		}
	}
}
